<template>
	<view class="withdrawalRecordsPage">
		<view class="withdrawalRecordsTop">
			<view class="search-content">

				<image class="search-img" src="../../../static/会员卡管理端/组合 405.png" mode=""></image>
				<input placeholder="请输入用户名" v-model="searchVal" @input="changeInput" @confirm="changeSearch"
					style="width: auto;line-height: 1em; " placeholder-style="font-size:28rpx;color:#A1A1A1;" />
				<image v-if="searchVal" class="icon_close" src="/static/delect.png" @click="close"></image>
			</view>
		</view>
		<view style="padding: 10rpx  30rpx">
			<view class="flex-between margin_20rpx_0">
				<view class="flex">
					<text class="font-size_26rpx" @click="showDelModify()">{{withdrawal}}</text>
					<uni-icons type="right" size="16"></uni-icons>
				</view>
			<!-- 	<view class="month flex">
					时间
					<image class="timeImg" src="../../../static/会员卡管理端/path (2).png" mode=""></image>
				</view> -->
			</view>
			<!-- <view class="flex-between margin_20rpx_0" style="color: rgb(153, 153, 153);">
				<text>累计订单金额：3632413.32</text>
				<text>累计订单笔数：363</text>
			</view> -->
		</view>
		<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
			@up="upCallback" :up="upOption" :down="downOption">
			<block v-for="(item,index) in list" :key="index">
				<view class="padding_20rpx">
					<view class="withdrawalRecordsList">
						<view class="padding-bottom_20rpx border-bottom-ECECEC flex-between">
							<text style="color: rgb(117, 117, 117);font-size: 28rpx;">{{item.sn_order}}</text>
							<!-- reject payment 1 待打款 2 打款中 3 已 完成 4 驳回',-->
							<text :class="[item.status==1||item.status==2 ? 'application' :item.status==3?'payment':'reject' ]" class="application flex">{{orderStatusFn(item.status)}}</text>
						</view>
						<view class="flex-between padding-top_20rpx  padding-bottom_20rpx border-bottom-ECECEC">
							<view class="flex">
								<image class="image" :src="item.avatar" mode=""></image>
								<view class="flex-columns-center margin-left_30rpx">
									<text class="font-weight_bold margin-bottom_10rpx"
										style="font-size: 30rpx;">{{item.nickname}}</text>

									<text style="color: rgb(153, 153, 153);;font-size: 24rpx;text-align: left;">{{
										item.phone
									}}
									</text>
								</view>
							</view>

							<view class="flex-column-end margin-left_30rpx  ">
								<text class="font-weight_bold margin-bottom_10rpx"
									style="font-size: 30rpx;color: rgb(255, 0, 0);">{{item.amount}}</text>

								<text style="color: rgb(153, 153, 153);font-size: 24rpx;text-align: left;">{{item.create_time}}
								</text>
							</view>

						</view>
						<view class="flex-between padding-top_20rpx">
							<view class="flex">
								<image v-if="item.pay_mode==1" class="wxImg" src="../../../static/会员卡管理端/组合 490.png" mode=""></image>
								<image v-if="item.pay_mode==2" class="wxImg" src="../../../static/会员卡管理端/组合 917.png" mode=""></image>
								<text :style="{color:(item.pay_mode==1?'rgb(83, 177, 98)':'rgb(42, 137, 255)')}" style="font-size: 28rpx;" >{{item.pay_mode==1?'微信提现':'支付宝提现'}}</text>
							</view>
							<view class="flex">
								<view class="check flex margin-right_16rpx" @click="viewDetail(item)">
									查看
								</view>
							<!-- 	<view class="delete flex">
									删除
								</view> -->
							</view>
						</view>
					</view>

				</view>
			</block>
		</mescroll-body>
		<sunui-popup ref="modifyActivity">
			<template v-slot:content>
		
				
				<view class="moreActiveButton">
					<view class="add" @click.stop="withdrawalStatus('全部',undefined)">
						全部
					</view>
					<view class="add" @click.stop="withdrawalStatus('微信','1')">
						微信
					</view>
				
					<view class="add" @click.stop="withdrawalStatus('支付宝','2')">
						支付宝
					</view>
				</view>
		
			</template>
		</sunui-popup>

	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				tabIndex: 4,
				searchVal: '',
				downOption: {
					auto: true
				},
				// 上拉配置项
				upOption: {
					auto: true
				},
				token: uni.getStorageSync('login').token,
				windowHeight: '',
				list: [],
				pay_mode:undefined,
				withdrawal:'全部'
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight * 2 - 800;
				},

			});
		},
		onShow() {
			this.mescroll?.resetUpScroll();

		},
		computed: {
			// 订单状态
			orderStatusFn: function() {
				return function(status) {
		
					let orderStatus = '';
					// status订单状态（1 待打款 2 打款中 3 已 完成 4 驳回',)
					orderStatus =
						status == 1 ? '待打款' : status == 2 ? '打款中' : status == 3 ? '已完成' :'驳回' ;
					return orderStatus;
				};
			},
		},
		methods: {
			changeInput(e){
				this.searchVal=e.detail.value
				this.mescroll?.resetUpScroll();
			},
			withdrawalStatus(name,val){
				this.pay_mode=val
				this.withdrawal=name
				this.$refs.modifyActivity.close()
				this.mescroll?.resetUpScroll();
			},
			viewDetail(item){
				this.$sun.navGo('/pages/withdrawalSettings/viewDetails/viewDetails',{...item})
			},
			// 显示修改删除按钮
			showDelModify() {
				// 显示下拉框
				this.$refs.modifyActivity.show({
					anim: 'bottom',
					position: 'bottom',
					shadeClose: true, //false使用户不能点击其它关闭页面
					topclose: false
				});
			},
			async upCallback(scroll) {

				const result = await this.$http.post({
					url: this.$api.withdrawalList,
					data: {
						limit: 10,
						page: scroll.num,
						pay_mode:this.pay_mode

					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})
				if (result.code == 0) {
					console.log('地址管理列表', result);
					this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
					if (scroll.num == 1) this.list = [];
					this.list = this.list.concat(result.data.list);
					console.log('this.list', this.list, this.list.length);
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.withdrawalRecordsPage {
		.flex-center() {
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.moreActiveButton {
		
		
			background-color: #fff;
		
		
			.add {
				height: 100rpx;
				color: #6568F6;
				font-size: 28rpx;
				font-family: Inter;
		
				.flex-center();
				border: 1px solid #f7f7f7;
		
		
			}
		
			.delete {
				.flex-center();
				height: 100rpx;
		
		
				color: #FF4636;
				font-size: 28rpx;
				font-family: Inter;
				box-shadow: 2rpx 2rpx 2rpx 30rpx 30rpx rgba(238, 238, 238, 1.0);
			}
		
		
		}
		.withdrawalRecordsTop {
			background: rgb(255, 255, 255);

			padding: 34rpx;
			// border-radius: 130rpx;


			.search-content {
				justify-content: center;
				display: flex;
				align-items: center;
				// width: 446rpx;
				height: 88rpx;

				background: rgb(246, 248, 255);
				;
				border-radius: 84rpx;

				.search-img {
					width: 30rpx;
					height: 30rpx;
					margin-right: 20rpx;
					margin-left: 40rpx;
				}

				.icon_close {
					padding: 0rpx 15rpx;
					width: 36rpx;
					height: 36rpx;
					margin-right: 30rpx;
				}

			}
		}

		.withdrawalRecordsList {
			margin-bottom: 26rpx;
			position: relative;

			.application {
				position: absolute;
				width: 116rpx;
				height: 52rpx;
				right: 0;
				top: 0;
				border-radius: 8rpx 20rpx 0rpx 20rpx;
				color: rgb(255, 255, 255);
				background: rgb(42, 137, 255);
			}

			.reject {
				position: absolute;
				width: 116rpx;
				height: 52rpx;
				right: 0;
				top: 0;
				border-radius: 4px 10px 0px 10px;
				color: rgb(255, 255, 255);

				background: rgb(255, 0, 0);
			}

			.payment {
				position: absolute;
				width: 116rpx;
				height: 52rpx;
				right: 0;
				top: 0;
				border-radius: 4px 10px 0px 10px;
				color: rgb(153, 153, 153);

				background: rgb(240, 240, 240);
			}

			border-radius: 10rpx;

			background: rgb(255, 255, 255);
			padding: 20rpx;

			.image {
				width: 84rpx;
				height: 84rpx;
				border-radius: 50%;
			}

			.wxImg {
				width: 48rpx;
				height: 48rpx;
				margin-right: 10rpx;
			}

			.check {
				width: 104rpx;
				height: 48rpx;
				border-radius: 12rpx;
				color: rgb(255, 255, 255);
				background: rgb(42, 137, 255);
				font-size: 24rpx;
			}

			.delete {
				width: 104rpx;
				height: 48rpx;
				border-radius: 12rpx;
				color: rgb(255, 255, 255);
				background: rgb(255, 0, 0);
				font-size: 24rpx;
			}
		}

		.month {
			.timeImg {
				width: 29.94rpx;
				height: 29.94rpx;
				margin-left: 5rpx;
				margin-right: 15rpx;
			}
		}

	}

	page {
		background: #f6f6f6;
	}
</style>